<template>
  <div class="pieBarBox">
    <div>
      <div class="pieBarPie" :id=pieId style="height: 140px;width: 140px;"></div>
      <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
        <slot name="theSlot"></slot>
        <div class="theSum">{{ theSum }}</div>
      </div>
    </div>
    <div :id=barId style="height: 200px;width: 300px;"></div>
    <div class="percentBox">
      <div>{{ data[0] }}%</div>
      <div>{{ data[1] }}%</div>
      <div>{{ data[2] }}%</div>
      <div>{{ data[3] }}%</div>
    </div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { computed, onMounted } from 'vue';


const props = defineProps({
  data: Object,
})
const dataX = props.data.dataX;
const dataY = props.data.dataY;
const sum = props.data.sum
const theColorList = props.data.theColorList
const pieId = props.data.pieId
const barId = props.data.barId

let dataHandled = computed(() => {
  let dataArr = [];
  for (let j = 0; j <= data.length - 1; j++) {
    let result = [], counter = 0;
    let theData = dataX[j].toString();
    let num = theData;
    for (let i = num.length - 1; i >= 0; i--) {
      counter++;
      result.unshift(num[i]);
      if (!(counter % 3) && i != 0) { result.unshift(','); }
    }
    let theValue = result.join('');
    dataArr.push(theValue);
  }
  return dataArr
})
let theSum = computed(() => {
  let result = [], counter = 0;
  let theData = sum.toString();
  let num = theData;
  for (let i = num.length - 1; i >= 0; i--) {
    counter++;
    result.unshift(num[i]);
    if (!(counter % 3) && i != 0) { result.unshift(','); }
  }
  let theValue = result.join('')
  return theValue
})

const perOne = computed(() => {
  return (dataX[0] * 100 / sum).toFixed(0)
})
const perTwo = computed(() => {
  return (dataX[1] * 100 / sum).toFixed(0)
})
const perThree = computed(() => {
  return (dataX[2] * 100 / sum).toFixed(0)
})
const perFour = computed(() => {
  return (dataX[3] * 100 / sum).toFixed(0)
})
const data = [perOne.value, perTwo.value, perThree.value, perFour.value]


onMounted(() => {
  getThePie()
  getTheBar()
})

const getThePie = () => {
  var chartDom = document.getElementById(pieId);
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'item',
      position: (point, param) => {
        return [point[0] + 30, 100]
      },
      formatter: (params) => {
        let result = [], counter = 0;
        let theData = dataX[params.dataIndex].toString();
        let num = theData;
        for (let i = num.length - 1; i >= 0; i--) {
          counter++;
          result.unshift(num[i]);
          if (!(counter % 3) && i != 0) { result.unshift(','); }
        }
        let theValue = result.join('')
        return `  <div style="display: flex;align-items: center;">
                      <div><div style='margin-right: 5px;background-color:${theColorList[params.dataIndex]};height:10px;width:10px;border-radius:50%'></div></div>
                      <div style='margin-right: 15px;font-family: "PingFang-Medium"'>${params.name}</div>
                      <div style='font-weight:bold;font-family: "PingFang-Bold"'>${theValue}</div>
                    </div>`
      }
    },
    series: [
      {
        clockwise: false,
        type: 'pie',
        radius: ['65%', '73%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          color: (colors) => {
            const colorList = theColorList;
            return colorList[colors.dataIndex]
          },
          borderRadius: 0
        },
        label: {
          show: false,
        },
        emphasis: {
        },
        labelLine: {
          show: false
        },
        data: [
          { value: dataX[0], name: dataY[0] },
          { value: dataX[1], name: dataY[1] },
          { value: dataX[2], name: dataY[2] },
          { value: dataX[3], name: dataY[3] },
        ]
      },
      {
        clockwise: false,
        type: 'pie',
        radius: ['0%', '65%'],
        itemStyle: {
          color: '#001731',
        },
        label: {
          show: false,
          position: 'center',
          color: '#ffffff'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            color: '#ffffff'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: dataX[0], name: dataY[0] },
          { value: dataX[1], name: dataY[1] },
          { value: dataX[2], name: dataY[2] },
          { value: dataX[3], name: dataY[3] },
        ]
      }
    ]
  };
  myChart.on('mouseover', 'series.pie', function (params) {
    myChart.dispatchAction({
      type: 'highlight',
      dataIndex: params.dataIndex,
      seriesIndex: 0,
    });
  });
  myChart.on('mouseover', 'series.pie', function (params) {
    myChart.dispatchAction({
      type: 'highlight',
      dataIndex: params.dataIndex,
      seriesIndex: 1,
    });
  });
  myChart.on('mouseout', 'series.pie', function (params) {
    myChart.dispatchAction({
      type: 'downplay',
      dataIndex: params.dataIndex,
      seriesIndex: 0,
    });
  });
  myChart.on('mouseout', 'series.pie', function (params) {
    myChart.dispatchAction({
      type: 'downplay',
      dataIndex: params.dataIndex,
      seriesIndex: 1,
    });
  });
  option && myChart.setOption(option);
}
const getTheBar = () => {
  var chartDom = document.getElementById(barId);
  var myChart = echarts.init(chartDom);
  var option;

  let dataAxis = dataY;

  option = {
    tooltip: {
      show: true,
      formatter: (params) => {
        return `  <div style="display: flex;align-items: center;">
                    <div><div style='margin-right: 5px;background-color:${theColorList[params.dataIndex]};height:10px;width:10px;border-radius:50%'></div></div>
                    <div style='margin-right: 15px;font-family: "PingFang-Medium"'>${params.name}</div>
                    <div style='font-weight:bold;font-family: "PingFang-Bold"'>${dataHandled.value[params.dataIndex]}</div>
                  </div>`
      }
    },
    xAxis: {
      show: false,
      axisLabel: {
        color: '#fff'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
    },
    yAxis: {
      inverse: true,
      splitLine: {
        show: false
      },
      data: dataAxis,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#999'
      },
    },
    series: [
      {
        type: 'bar',
        barGap: '130%',
        barCategoryGap: '70%',
        barMaxWidth: 20,
        showBackground: true,
        backgroundStyle: {
          borderRadius: 15,
        },
        label: {
          show: true,
          color: '#ffffff',
          position: ['10px', '30%'],
          data: data,
          formatter: (params) => {
            let result = [], counter = 0;
            let theData = dataX[params.dataIndex].toString();
            let num = theData;
            for (let i = num.length - 1; i >= 0; i--) {
              counter++;
              result.unshift(num[i]);
              if (!(counter % 3) && i != 0) { result.unshift(','); }
            }
            let theValue = result.join('')
            return theValue
          },
        },
        itemStyle: {
          borderRadius: 15,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#0066ff20' },
            { offset: 1, color: '#52befb' },
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#52befb' },
              { offset: 1, color: '#0066ff20' },
            ])
          }
        },
        data: dataX
      },
    ],
    grid: {
      containLabel: 'true',
      top: -10,
      left: 10,
      right: 10,
      bottom: -34
    }
  };
  option && myChart.setOption(option);

}


</script>
<style>
.pieBarBox {
  display: flex;
  padding-block: 30px;
}

.theSlot {
  color: #999999;
  font-size: 12px;
}

.theSum {
  color: #DBEAEA;
  font-size: 24px;
}

.pieBarPie {
  background-image: url('@/assets/images/pieBarPie.png');
  background-position: center center;
  background-repeat: no-repeat;
}

.percentBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #ffffff;
  padding-block: 5px;
  font-family: "PingFang-Bold"
}
</style>